<template>
  <div>
    <!-- 盘点 -->
    <el-dialog title="盘点" :width="ScanType == 1 ? '700px' : '1000px'" destroy-on-close append-to-body :visible.sync="show"
      :before-close="cancel">
      <div class="content">
        <div style="width: 300px;height: 100%;margin-right: 6px;" v-if="ScanType == 2">
          <el-card style="height: 100%;">
            <div class="leftList">库位号：{{ backDataForm.positionNo }} </div>
            <div class="leftList">sku：{{ backDataForm.skuNo }}</div>
            <div class="leftList">sku：{{ backDataForm.skuName }}</div>
            <div class="leftList">快照数量：{{ backDataForm.stockSnap }}个</div>
            <div class="leftList lastChild">确认数量：<el-input  v-model="backDataForm.confirmNum" style="width: 100px;" size="small"></el-input> <el-button
                size="small" @click="postconfirmNum">确认</el-button>
            </div>
          </el-card>
        </div>

        <div style="width: 700px;">

          <el-card>
            <span>库位号：{{ positionNo }}</span>
            <!-- 增删改查 -->
            <el-row style="margin: 15px 0" :gutter="10">
              <!-- v-hasPermi="['distribution:purchase:createPurchaseOrder']" -->
              <el-col :span="12">
                <el-input clearable @change="sumbmitForm" v-model="serialId" />
              </el-col>
              <el-col v-if="ScanType != 2" :span="10" style="display: flex; flex-direction: column; align-items: flex-end">
                <el-button type="text" @click="confirmNumzero">确认数量为0</el-button>
                <div>快照数量：{{ stockSnap }}</div>
                <div>当前确认数量：{{ curentNums }}</div>
              </el-col>
            </el-row>
          </el-card>
          <el-table   ref="TableRef"  :data="tabelList" height="474">
            <el-table-column align="center" label="sku序列id" prop="skuSerialId"></el-table-column>
            <el-table-column align="center" :label="$t('类型')" prop="remark">
              <template slot-scope="{row}">
                <span v-if="row.type==2">通过创建加入</span>
              </template>
            </el-table-column>
          </el-table>

        </div>
      </div>
      <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">
              <!-- 关闭 -->
              {{ $t("关闭") }}
            </el-button>
          </div>
    </el-dialog>
  </div>
</template>

<script>
import { confirmNum,stockCheckPositionSerialList, scanSerial,stockCheckPositionSerial , } from '@/api/distribution/sku/Inventory'
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  props: {
    //扫码类型
    ScanType: {
      type: String,
      required: false,
      default: '1',
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
    checkPositionId: {
      type: String,
      required: false,
    },
    //库位号
    positionNo: {
      type: String,
      required: false,
    },
    //快照数量
    stockSnap: {
      type: Number,
      required: false,
    },
  },
  data() {
    return {
      submitNum:0,
      backDataForm:{
        confirmNum:0
      },
      serialId: '',
      queryParams: {
        pageNum: 0,
        pageSize: 10,
      },
      tabelList: [],
      curentNums: 0,
    };
  },
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.getList();
        if (this.ScanType==2) {
          this.getstockCheckPositionSerial()
        }
      } else {
        this.backDataForm = {}
      }
    },
  },
  methods: {
    /**确认扫码数量为0 */
    confirmNumzero(){
      if(this.tabelList.length>1){
        this.$message({
          type:'error',
          message:'存在序列号'
        })
      }else{
        confirmNum({checkPositionId:this.checkPositionId,confirmNum:0}).then((res)=>{
        this.$message({ type: 'success', message: res.msg})
      })
      }
    },
    postconfirmNum(){
      confirmNum({checkPositionId:this.checkPositionId,confirmNum:this.backDataForm.confirmNum}).then((res)=>{
        this.$message({ type: 'success', message: res.msg})

      })
    },
    /**获取手动确认数据 */
    getstockCheckPositionSerial(){
      stockCheckPositionSerial({checkPositionId:this.checkPositionId}).then((res)=>{
        this.backDataForm = res.data
      })
    },
    /**提交扫码 */
    sumbmitForm() {
      scanSerial({ checkPositionId: this.checkPositionId, serialId: this.serialId, }).then((res) => {
        this.getList()
        this.serialId = ''
      })
    },
    getList() {
      stockCheckPositionSerialList({ checkPositionId: this.checkPositionId }).then((res) => {
        this.tabelList = res.rows
        console.log(this.tabelList );
        this.curentNums = res.rows.length
      })
    },
    cancel() {
      this.serialId = ''
      this.$emit("update:show", false);
      this.$emit("update");
    },
  },
};
</script>
<style scoped lang="scss">
.content {
  display: flex;
  height: 600px;

}

.leftList {
  margin: 20px 0;
}

.lastChild {
  display: flex;
  align-items: center;
}
</style>
